import { Form, Select, Space, Button, Col, Row, DatePicker } from 'antd'
import locale from 'antd/es/date-picker/locale/zh_CN'
import { http } from '@/service'
import { useState, useEffect } from 'react'
import { useStore } from '@/store'

import 'dayjs/locale/zh-cn'
const { Option } = Select
const { RangePicker } = DatePicker
function Search({ onSearch, onReset }) {
  const layout = {
    labelCol: { span: 4 },
  }
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  }
  const [form] = Form.useForm()
  // 定义状态数据
  const [statusLisst] = useState([
    {
      id: '-1',
      name: '全部',
    },
    {
      id: '0',
      name: '草稿',
    },
    {
      id: '1',
      name: '待审核',
    },
    {
      id: '2',
      name: '审核通过',
    },
    {
      id: '3',
      name: '审核失败',
    },
  ])
  // 获取频道数据
  const { channelStore } = useStore()

  const onFinish = (values) => {
    const params = {}
    const { status, channel_id, date } = values
    params.status = status
    if (channel_id) {
      params.channel_id = channel_id
    }
    if (date) {
      params.begin_pubdate = date[0].format('YYYY-MM-DD')
      params.end_pubdate = date[1].format('YYYY-MM-DD')
    }
    // 如何把数据传递到父组件
    onSearch(params)
  }
  // 重置
  const onResetBtn = () => {
    form.setFieldsValue({
      status: '请选择状态',
      channel_id: '请选择频道',
      date: '',
    })
    onReset()
  }
  return (
    <>
      <Form
        {...layout}
        form={form}
        name="control-hooks"
        onFinish={onFinish}
        style={{ marginTop: '20px' }}>
        <Row gutter={24}>
          <Col span={4}>
            <Form.Item name="status" label="状态">
              <Select placeholder="请选择状态" allowClear>
                {statusLisst.map((item) => (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="channel_id" label="频道">
              <Select placeholder="请选择频道" allowClear>
                {channelStore.channelList.map((item) => (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="date" label="频道">
              <RangePicker locale={locale} format="YYYY-MM-DD HH:mm:ss" />
            </Form.Item>
          </Col>
          <Form.Item {...tailLayout}>
            <Space>
              <Button type="primary" htmlType="submit">
                帅选
              </Button>
              <Button htmlType="button" onClick={onResetBtn}>
                重置
              </Button>
            </Space>
          </Form.Item>
        </Row>
      </Form>
    </>
  )
}

export default Search
